<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
	<script type="text/javascript" src="30days.js"></script>
	<title>day 10 - the this keyword</title>
</head>



<body>

	<h1>day 10 - the this keyword</h1>
	<a href="http://tutsplus.com" class="link1">link 1</a>
	<a href="http://google.com" class="link2">link 2</a>
	<a href="http://google.com" class="link3">link 3</a>
	<a href="http://google.com" class="link4">link 4</a>
	
	<script type="text/javascript">

	// object with function to test the 'this' reference
	var obj = {
		doIt: function (e) {
			e.preventDefault();
			// this is the 'a' anchor
			console.log(this);
		},
		doThisObj: function () {
			// 'this' now is going to refer the 'obj'
			console.log(this);
		}
	}

	function doSomething(e) {
		
		// prevente the default action
		e.preventDefault();
		
		// log the event and the 'this' reference
		console.log(e);
		console.log(this);
	}
	
	
	// call the function when anchor is pressed
	$('a.link1').on('click',doSomething);
	
	// cal the function inside the object
	$('a.link2').on('click',obj.doIt);
	
	// call an anonymous function with the event argument and execute the code 
	$('a.link3').on('click',function (e) {
		obj.doThisObj();
		// prevent the default event when anchor is pressed
		e.preventDefault();
	});
	
	// 'this' inside function 'doIt' is not going to refer the anchor but the obj 
	$('a.link4').on('click',$.proxy(obj.doIt,obj));

</script>




</body>
</html>